<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="dv">
        <input type="button" value="开始点名" id="btu">
        <input type="button" value="停止" id="btu1">
        <div class="luc">小黑子想吃啥</div>
        <div class="ch">
            <div class="name">香档捞盖饭</div>
        </div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    body {
        background-color: cornsilk;
    }
    
    #dv {
        width: 800px;
        margin: 20px auto;
        border: 4px solid darkviolet;
        text-align: center;
    }
    
    ul li {
        vertical-align: top;
        display: inline-block;
        width: 100px;
        height: 50px;
        border-radius: 35%;
        border: 3px dashed palevioletred;
        text-align: center;
        line-height: 50px;
        margin: 5px 5px;
    }
    
    li.change {
        background-color: greenyellow;
        font-size: 15px;
        color: black;
        font-weight: bolder;
    }
    
    #btu,
    #btu1 {
        width: 100px;
        height: 50px;
        font-size: 15px;
        border-radius: 10px;
        cursor: pointer;
        margin: 10px 50px 0 50px;
        color: brown;
        background-color: pink;
    }
    
    .ch {
    position: relative;
    width: 250px;
    height: 150px;
    border-radius: 10px;
    margin: 12px auto;
    border: 2px solid yellow;
    text-align: center;
    }
    
    .luc {
        font-size: 20px;
        font-weight: bold;
        margin: 10px auto;
        text-align: center;
        color: green;
    }
    
    .name {
        position: relative;
        font-size: 35px;
        /* left: 10px; */
        top: 45px;
        text-align: center;
    }
</style>


<script>
    var dv = document.getElementById("dv");
    var btu = document.getElementById("btu");
    var btu1 = document.getElementById("btu1");



    var ula = document.createElement("ul");
    dv.appendChild(ula);
    var oLi = document.getElementsByTagName("li");
    var arr = ["铁锅炒鸡", "香精煎鱼", "油饼", "荔枝", "香菜凤仁鸡", "虾头", "蒸乌鱼", "梅油酥汁", "香炖橘子", "榛果粉", "酥鳝", "香档捞盖饭", "香炖大酪", "蒸梨铺", "纯鹿仁", "紫沙", "香杯糕", "香翅紫蛋", "泥焖豆馍蒸", "真艾粉", "深井冰", "香杯网煲", "香烫罐菜"]
    for (var i = 0; i < arr.length; i++) {
        var liObj = document.createElement("li");
        liObj.innerText = arr[i];
        ula.appendChild(liObj);
    }



    var timer = null;
    btu.onclick = function() {
        clearInterval(timer);
        timer = setInterval(function() {
            var i = Math.floor(Math.random() * arr.length);
            for (var j = 0; j < oLi.length; j++) {
                oLi[j].removeAttribute("class");
            }
            oLi[i].className = "change";
        }, 50);
    };


    btu1.onclick = function() {
        clearInterval(timer);
        var choise = document.getElementsByClassName("change")[0];
        var name = choise.innerText;
        var nameSpan = document.getElementsByClassName('name')[0];
        nameSpan.innerText = name;
    }
</script>

</html>